<template>
  <div class="template-workUnitChangeForm-Lu">
    <a-modal
      title="申请解聘审核"
      :visible="increaseVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      :footer="false"
      :dialog-style="{ margin: '0 auto' }"
      wrapClassName="form-workUnitChangePrintModal-Lu"
      @cancel="closeVisible">
      <div style="padding: 0 50px 50px ;">
        <div style="text-align: right;">
          <a-button class="blue-btn" style="margin: 10px;" v-print="printObj">打印</a-button>
        </div>
        <div id="printTest" v-if="increaseVisible">
          <a-form
              ref="ruleForm"
              :model="form"
          >
            <h1 style="text-align: center;">xx壮族自治区食品药品审评查验中心<br/>申请解聘表</h1>
            <table border="1" cellspacing="0" class="retirementRecruitment-table-Lu sqjp-table">
              <tr>
                <th>申请日期</th>
                <td>{{ moment(fromState.ffqsj).format('YYYY-MM-DD') }}</td>
                <th>工作单位</th>
                <td style="padding: 10px;line-height: 1.5;">{{ fromState.fgzdw }}</td>
              </tr>
              <tr>
                <th>姓&emsp;&emsp;名</th>
                <td>{{ fromState.realname }}</td>
                <th>性&emsp;&emsp;别</th>
                <td>
                  <span v-if="fromState.sex == 1">男</span>
                  <span v-if="fromState.sex == 2">女</span>
                </td>
              </tr>
              <tr>
                <th>审评类型</th>
                <td colspan="3" style="text-align: left;padding-left: 10px;">
                  <a-checkbox-group
                    v-if="plainOptions.length"
                    v-model="plainOptions"
                    disabled
                    name="checkboxgroup"
                    :options="plainOptions"
                  />
                  <span v-else>暂无数据</span>
                </td>
              </tr>
              <tr>
                <th>申请解聘类型</th>
                <td colspan="3" style="text-align: left;padding-left: 10px;">{{ fromState.fsqjcylb?fromState.fsqjcylb.toString():'' }}</td>
              </tr>
              <tr>
                <th>申请原因</th>
                <td colspan="3" style="text-align: left;padding-left: 10px;">{{ fromState.fsqyy }}</td>
              </tr>
              <tr>
                <th>办理意见</th>
                <td colspan="3">
                  <div style="width: 100%;height: 150px;"></div>
                </td>
              </tr>
            </table>
          </a-form>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'
import { querySqInfo,dict } from './service/index'
export default {
  data() {
    return {
      moment,
      increaseVisible: false,
      formKey: '',
      form: this.$form.createForm(this, { name: 'appointmentOfInspectorsFrom' }),
      fromState:{},
      plainOptions: [],
      printObj:{
          id:"printTest", //需要打印的id名称
          popTitle:"xx食品药品审评查验中心申请解聘表",//文档的名称
          // preview:true,//预览功能，不好用
          zIndex:'20002',
          beforeOpenCallback(vue){
              // //console.log('打印回调',vue)
          },
          openCallback (vue) {//打开之前
              // //console.log('打开之前',vue)
          },
          closeCallback (vue) {//关闭了打印工具
              // //console.log('关闭了打印工具')
          },
      },
    }
  },
  methods: {
    getNewData(ids){
      querySqInfo({id:ids}).then(res => {
        //console.log(res)
        let resItem = res.result
        let data1 = {}
        data1 = {
          id: resItem.id,
          ffqsj: resItem.ffqsj?resItem.ffqsj:new Date(),
          realname: resItem.realname,
          sex: resItem.sex,
          fsfzh: resItem.fsfzh,
          fgzdw: resItem.fgzdw,
          ftxsj: resItem.ftxsj?moment(resItem.ftxsj):null,
          fsqjcylb: resItem.fsqjcylb?resItem.fsqjcylb.split(','):null,
          fsqyy: resItem.fsqyy,
          fblyj: resItem.fblyj
        }
        this.fromState = data1
        this.getdict()
        //console.log(this.fromState)
        this.formKey = Date.now()
      })
    },
    getdict(){
      dict("检查员登记类别").then(res => {
        res.result.forEach((item,index) => {
          //console.log(this.fromState.fyjcylb,item)
          if(this.fromState.fyjcylb.indexOf(item.itemValue) !== -1){
            this.plainOptions.push(item.itemValue)
          }
        })
      })
    },
    closeVisible(){
      this.increaseVisible = false
    },
  },
}
</script>
<style lang="less">
.retirementRecruitment-table-Lu{
    width: 100%;
    margin: 0 auto;
    margin-top: 4mm;
    font-size: 16px;
    th {
      text-align: center;
      font-size: 16px;
      line-height: 2.5;
      padding: 0px;
    }
    td {
      min-width: 150px;
      text-align: center;
      line-height: 2.5;
      color: black;
      padding: 0px;
      font-size: 16px;
      // font-weight: 600;
      font-family: 'SimSun';
      word-wrap:break-word;
      word-break:break-all;
      white-space:normal;
    }
    .ant-input {
      font-weight: 600;
      // height: 63px;
      max-height: none;
    }
  //   .ant-input:placeholder-shown {
  //     height: 63px;
  //     max-height: none;
  //   }
      form .ant-mentions, form textarea.ant-input {
          margin-bottom: 0px;
          height: 46px;
      }
      // form textarea.ant-input {
      //     margin-bottom: 0px;
      // }
    .ant-input-group.ant-input-group-compact .ant-input {
      // height: 63px;
      max-height: none;
    }
    .ant-upload-list {
      display: none;
    }
    p {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  .sqjp-table {
    th {
        width: 130px
    }
  }
  .form-workUnitChangePrintModal-Lu {
    width: 794px;
    margin: 0 auto;
    .ant-modal {
      width: 100% !important;
    }
    //-----------------
  }
</style>
